<template>
  <Dialog
    title="出库"
    :visible="visible"
    button-text="提交"
    :disabled="disabled"
    :loading="loading"
    class="setUp two-columns"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <!-- 出库 -->
    <el-row type="flex">
      <el-col :span="10">领取单号：{{ deliveryData.receiveCode }}</el-col>
      <el-col :span="10">来源：{{ deliveryData.deptType }}</el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="10">申请方：{{ deliveryData.deptName }}</el-col>
      <el-col :span="8">申领/开单人：{{ deliveryData.receiveUsr }}</el-col>
      <el-col :span="6">顾客：{{ deliveryData.customerName }}</el-col>
    </el-row>
    <el-table
      :data="deliveryData.listDto"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="name"
        label="名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="type"
        label="类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="specl"
        label="规格"
        show-overflow-tooltip
      />
      <el-table-column
        prop="unit"
        label="单位"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dataCount"
        label="开单数量"
        show-overflow-tooltip
      />
      <el-table-column
        prop="availableStock"
        label="当前库存"
        show-overflow-tooltip
      />
      <el-table-column
        prop="receiveCount"
        label="出库数量"
        min-width="95"
      >
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.receiveCount" controls-position="right" :min="1" :max="Number(scope.row.dataCount)" @blur="handleChange(scope.row.receiveCount,scope,scope.row.dataCount)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col>仓库：{{ deliveryData.warehouseName }}</el-col>
    </el-row>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog/index";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      visible: false,
      deliveryData: {},
      disabled: false,
      loading: false,
    };
  },
  methods: {
    handleChange(value, scope, max) {
      if (!value) this.$set(this.deliveryData.listDto[scope.$index], 'receiveCount', max);
      if (value && value !== max) this.$message.error("出库数量与开单数量应该保持一致");
    },
    handleConfirm() {
      let isTrue = false;
      let msg = '';
      this.deliveryData.listDto.forEach(item => {
        if (item.receiveCount > item.availableStock) {
          isTrue = false;
          msg = "出库数量应小于可用库存";
        }
        if (item.receiveCount !== item.dataCount) {
          isTrue = false;
          msg = "出库数量与开单数量应该保持一致";
        }
      });
      if (isTrue) {
        this.$message.error(msg);
        return;
      }
      this.loading = true;
      this.$api['warehouse/delivery/submitReceipt'](this.deliveryData).then((res) => {
        if (res.code !== 200) return this.$message.info('出库失败');
        this.loading = false;
        this.$emit('success');
        this.visible = false;
        return this.$message.success('出库成功');
      });
    },
    delivery(id) {
      this.visible = true;
      this.$api['warehouse/delivery/receiptDetails']({ id }).then((res) => {
        if (res.code !== 200) return this.$message.info('获取数据详情失败');
        this.deliveryData = res.data;
        if (this.deliveryData.listDto.length > 0) {
          this.deliveryData.listDto.forEach(item => {
            this.$set(item, 'receiveCount', item.dataCount);
          });
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      });
    },
    // 关闭
    handleClose() {
      this.loading = false;
      this.triageForm = {};
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row{
  margin: 10px 0;
}
.el-table .cell{
  height: none;
}
</style>
